<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GO机网管理后台</title>
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
	<link href="../../css/bootstrap.min.css" rel="stylesheet">
	<link href="css/nifty.min.css" rel="stylesheet">
	<link href="../../css/demo/nifty-demo-icons.min.css" rel="stylesheet">
	<link href="../../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<link href="../../plugins/pace/pace.min.css" rel="stylesheet">
	<script src="../../plugins/pace/pace.min.js?2016/8/5"></script>
	<script src="../../js/jquery-2.2.1.min.js"></script>
	
	<style>
		#table div{
			padding: 5px;
			margin: 0;
			color: #757575;
		}
		td{
			vertical-align: middle!important;
			
		}
		.panel.active{
			border-color: #2ac845;
		}
	</style>
</head>
<body id="main">
<div id="container" class="effect mainnav-lg">
	@@include('public/header.html')
	<div class="boxed">
		<div id="content-container">
			
			<div id="page-title" style="position: relative">
				<h1 class="page-header text-overflow">上门订单管理</h1>
			</div>
			
			<div id="page-content">
				<div id="page-wrapper">
					<button value="" v-on:click="loadOrder('');" class="btn btn-default" v-bind:class="{active:status===''}">全部订单</button>
					<button value="0" v-on:click="loadOrder(0);" class="btn btn-default" v-bind:class="{active:status=='0'}">待处理</button>
					<button value="1" v-on:click="loadOrder(1);" class="btn btn-default" v-bind:class="{active:status=='1'}">待接单</button>
					<button value="2" v-on:click="loadOrder(2);" class="btn btn-default" v-bind:class="{active:status=='2'}">待回收</button>
					<button value="3" v-on:click="loadOrder(3);" class="btn btn-default" v-bind:class="{active:status=='3'}">待确认</button>
					<button value="6" v-on:click="loadOrder(6);" class="btn btn-default" v-bind:class="{active:status=='6'}">已完成</button>
					<button value="7" v-on:click="loadOrder(7);" class="btn btn-default" v-bind:class="{active:status=='7'}">已评价</button>
				</div>
				
				<div class="col-sm-12 pad-btm pad-top">
					<table class="table table-striped" id="table">
						<tr v-for="o in orders">
							<td>
								<div><span>订单状态：</span><span v-text="recycleStatus[o.status]"></span></div>
								<div><span>订单编号：</span><span v-text="o.order_num"></span></div>
								<div><span>下单时间：</span><span v-text="o.update_time"></span></div>
								<div><span>回收金额预估：</span><span v-text="o.valuation"></span></div>
							</td>
							<td>
								<div><span>手机号码：</span><span v-text="o.phone_number"></span></div>
								<div><span>地区：</span><span>{{o.city}}</span> <span v-text="o.region"></span></div>
								<div v-if="way==1"><span>详细地址：</span><span v-text="o.address"></span></div>
								<div v-if="way==1"><span>上门时间：</span><span v-text="o.door_time"></span></div>
								<div><span>订单备注：</span><span v-text="o.note"></span></div>
							</td>
							<td>
								<div><span>品牌及型号：</span><span v-text="o.v_name"></span></div>
								<div><span>成色：</span><span v-text="o.config_item"></span></div>
								<div v-if="o.status>5"><span>回收金额：</span><span style="color:#fb8c00;" v-text="o.price"></span></div>
							</td>
							<td>
								<div v-if="o.status!=0">
									<div v-if="way==1"><span>师傅姓名：</span><span v-text="o.m_name"></span></div>
									<div v-if="way==2"><span>门店名称：</span><span v-text="o.m_name"></span></div>
									<div><span>师傅手机：</span><span v-text="o.m_account"></span></div>
								</div>
							</td>
							<td  v-if="way==1" style="width: 15%" class="text-center">
								<button v-if="o.status==0" class="btn-primary btn" v-on:click="openModal(o);">指派订单</button>
							</td>
						</tr>
						<tr v-if="orders.length==0">
							<td colspan="4" style="text-align: center"><h4>没有对应状态的订单</h4></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		
		<nav id="mainnav-container">
			@@include('public/left_menu.html')
		</nav>
	</div>
	
	
	<!-- 指派弹窗（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel">分配师傅</h4>
				</div>
				<div class="modal-body" style="text-align: center;">
					<validator name="validation">
						<span>请选择接单师傅：</span>
						<select v-model="engineer" v-validate:engineer="{required: true}" style="min-width: 150px;">
							<option v-for="e in engineers" value="{{e.member_id}}" v-text="e.m_name"></option>
						</select>
					</validator>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="addBrand" :disabled="!$validation.valid" v-on:click="assignOrder();">确定分配</button>
				</div>
			</div>
		</div>
	</div>

</div>
@@include('public/footer.html')

<script src="../../plugins/vue/vue.min.js"></script>
<script src="js/vue-validator.min.js"></script>
<script src="../../js/base.js"></script>
<script>
	var status = getQueryString("status");
	var repairWay = getQueryString("way");
	
	/*var recycleStatus = {
	 "-1":"后台未处理",
	 "0":"后台未处理",
	 "1":"待接单",
	 "2":"待回收",
	 "3":"师傅确认",
	 "4":"客户取消",
	 "5":"答应回收",
	 "6":"已完成",
	 "7":"已评价"
	 };*/
	
	var vue = new Vue({
		el:"#main",
		data:{
			orders:[],
			recycleStatus:recycleStatus,
			currentOrder:null,
			engineers:null,
			engineer:null,
			status:status,
			way:repairWay
		},
		methods:{
			/*根据状态加载订单*/
			loadOrder:function(status){
				this.status = status;
				$.get(apiRecycle+"partner.php/Admin/Order/recycle_order_list",{
					status:status,
					repair_way:repairWay
				},function(res){
					vue.orders = res.data;
				}, "json");
			},
			
			/*分配订单*/
			assignOrder:function(){
				loading.show();
				$.post(apiRecycle+"partner.php/Admin/Order/assign_recycle_order", {
					rid:vue.currentOrder.rid,
					member_id:vue.engineer
				}, function(res){
					loading.close();
					if(res.code==200){
						vue.currentOrder.status = 1;
						vue.engineer = null;
						$("#myModal").modal("hide");
					} else {
						alert(res.message);
					}
				}, "json")
			},
			
			/*打开弹窗*/
			openModal:function(order){
				loading.show();
				$.get(apiRecycle+"partner.php/Admin/Order/get_region_engineer", {re_id:order.re_id,city_id:order.city_id}, function(res){
					loading.close();
					vue.currentOrder = order;
					$("#myModal").modal("show");
					vue.engineers = res.data;
				}, "json")
			}
		},
		ready:function(){
			this.loadOrder(status);
		}
	});
</script>
</body>
</html>
